<template>
    <a-card>
        <a-row type="flex" align="middle">
            <a-col>
                <a-input-search
                        allowClear
                        v-model="info"
                        placeholder="请输入名字"
                        enter-button="Search"
                        @search="onSearch"
                />
            </a-col>
        </a-row>
    </a-card>
</template>

<script>
  import {mapActions, mapMutations, mapState} from 'vuex'

  export default {
    name: "RoleHead",
    data() {
      return {
        info: ''
      }
    },
    computed: {
      ...mapState('role', ['queryForm'])
    },
    methods: {
      ...mapMutations('role', ['setState']),
      ...mapActions('role', ['query']),
      onSearch() {
        this.setState({name: 'queryForm', value: {...this.queryForm, name: this.info}})
        this.query()
      }
    }
  }
</script>

<style scoped>

</style>